// import * as turf from '@turf/turf'
// import { deepClone } from '@/utils/index'


// export default {
//   data() {
//     return {
//       map: null,
//       zoom: 14,
//       editor: null,
//       draw: null,
//       layer: [],
//       lines: [],
//       markers: [],
//     }
//   },
//   methods: {
//     initMap(containerId) {
//       this.map = L.map(containerId || 'mapDiv', { center: [32.06069, 118.7913], zoom: this.zoom, zoomControl: true, fadeAnimation: true });
//       let gaoDeLayer = L.tileLayer(
//         "http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}"
//       )
//       // let gaoDeLayer = L.tileLayer(
//       //   "/mapfile/{z}/{x}/{y}.png"
//       // )
//       gaoDeLayer.addTo(this.map);
//       this.map.on('bm_draw_end', ((e) => {
//         // 监听绘图结束事件
//         this.layer.push(e.detail.layer);
//         if (window.eventBus != undefined) {
//           window.eventBus.$emit('onDrawEnd', e.detail.path, e.detail.type == 'circle' ? e.detail.layer.getRadius() : 0);
//         }
//         if (this.onDrawEndEvent != undefined) {
//           this.onDrawEndEvent(e.detail.layer);
//         }
//       }))
//     },
//     buildIcon() {
//       return L.icon({
//         iconUrl: '/assets/imgs/marker-icon.png',
//         iconSize: [25, 41],
//         iconAnchor: [12, 41],
//         popupAnchor: [1, -34],
//         tooltipAnchor: [16, -28],
//         shadowSize: [41, 41]
//       });
//     },
//     addMarker(center, options) {
//       options = Object.assign({
//         icon: this.buildIcon()
//       }, options);
//       return L.marker(center, options).addTo(this.map);
//     },
//     addMarkerWithPopup(center, popup, options = {}) {
//       options = Object.assign({
//         icon: this.buildIcon()
//       }, options);
//       let marker = L.marker(center, options).bindPopup(popup).addTo(this.map);
//       return marker;
//     },
//     drawPolygon() {
//       // 绘制多边形
//       var polyline;
//       const onClick = (e) => {
//         if (polyline != undefined) {
//           polyline.addLatLng([e.latlng.lat, e.latlng.lng]);
//         } else {
//           polyline = new L.polygon([[e.latlng.lat, e.latlng.lng]]);
//           polyline.addTo(this.map);
//         }
//       }
//       const onDBClick = () => {
//         this.map.off('click', onClick);
//         this.map.off('dblclick', onDBClick);
//         this.map.doubleClickZoom.enable();
//         this.map.fire('bm_draw_end', { detail: { layer: polyline, type: 'polyline' } })
//       }
//       this.map.on('click', onClick);
//       this.map.on('dblclick', onDBClick);
//     },
//     drawCircle() {
//       // 绘制圆形
//       let isDrawing = false;
//       var circle;
//       this.map.dragging.disable();
//       let center = []
//       var onClick = (e) => {
//         // 判断是否第一次点击
//         if (!isDrawing) {
//           // 第一次点击，确定圆心
//           circle = new L.circle()
//           center = [e.latlng.lat, e.latlng.lng];
//           circle.setLatLng(center);
//           isDrawing = true;
//           circle.addTo(this.map)
//         } else {
//           // 非第一次点击，确定半径
//           let distance = this.map.distance(center, [e.latlng.lat, e.latlng.lng]);
//           circle.setRadius(distance);
//           isDrawing = false;
//           this.map.off('click', onClick);
//           this.map.off('mousemove', onMove);
//           this.map.dragging.enable();
//           this.map.fire('bm_draw_end', { detail: { layer: circle, type: 'circle' } })
//         }
//       };
//       var onMove = (e) => {
//         if (isDrawing) {
//           let distance = this.map.distance(center, [e.latlng.lat, e.latlng.lng]);
//           circle.setRadius(distance);
//         }
//       }
//       this.map.on('click', onClick);
//       this.map.on('mousemove', onMove);
//     },
//     drawFreePolygon() {
//       // 自由绘制
//       var polyline;
//       var isDrawing = false;
//       this.map.dragging.disable();
//       const onMouseDown = (e) => {
//         isDrawing = true;
//         polyline = new L.polygon([[e.latlng.lat, e.latlng.lng]]);
//         polyline.addTo(this.map);
//       }
//       const onMouseMove = (e) => {
//         if (isDrawing) {
//           polyline.addLatLng([e.latlng.lat, e.latlng.lng]);
//         }
//       }
//       const onMouseUp = () => {
//         this.map.off('mousedown', onMouseDown);
//         this.map.off('mousemove', onMouseMove);
//         this.map.off('mouseup', onMouseUp);
//         this.map.dragging.enable();
//         this.map.fire('bm_draw_end', { detail: { layer: polyline, type: 'freepolygon' } })
//       }
//       this.map.on('mousedown', onMouseDown);
//       this.map.on('mousemove', onMouseMove);
//       this.map.on('mouseup', onMouseUp);
//     },
//     drawRectangle() {
//       // 绘制矩形
//       var rectangle;
//       let isDrawing = false;
//       this.map.dragging.disable();
//       var startPoint;
//       var onClick = (e) => {
//         // 判断是否第一次点击
//         if (!isDrawing) {
//           // 第一次点击，确定起始位置
//           startPoint = [e.latlng.lat, e.latlng.lng];
//           rectangle = new L.rectangle([startPoint, startPoint]);
//           isDrawing = true;
//           rectangle.addTo(this.map)
//         } else {
//           // 非第一次点击，确定结束位置
//           rectangle.setBounds([startPoint, [e.latlng.lat, e.latlng.lng]]);
//           isDrawing = false;
//           this.map.off('click', onClick);
//           this.map.off('mousemove', onMove);
//           this.map.dragging.enable();
//           this.map.fire('bm_draw_end', { detail: { layer: rectangle, type: 'rectangle' } })
//         }
//       };
//       var onMove = (e) => {
//         if (isDrawing) {
//           rectangle.setBounds([startPoint, [e.latlng.lat, e.latlng.lng]]);
//         }
//       }
//       this.map.on('click', onClick);
//       this.map.on('mousemove', onMove);
//     },
//     drawSector() {
//       // 绘制扇形
//       var sector, line, startAngle, endAngle;
//       let isDrawing = false;
//       this.map.dragging.disable();
//       var points = [];
//       var onClick = (e) => {
//         // 判断是否第一次点击
//         if (!isDrawing) {
//           // 第一次点击，确定起始位置
//           points.push([e.latlng.lat, e.latlng.lng]);
//           line = new L.polyline([[e.latlng.lat, e.latlng.lng], [e.latlng.lat, e.latlng.lng]]);
//           isDrawing = true;
//           line.addTo(this.map)
//         } else {
//           if (points.length == 1) {
//             // 第二次点击，确定扇形起始点位置
//             points.push([e.latlng.lat, e.latlng.lng]);
//             line.setLatLngs([points[0], points[1]])
//           } else {
//             // 第三次点击，确定扇形终点位置
//             points.push([e.latlng.lat, e.latlng.lng]);
//             endAngle = turf.bearing(turf.point(deepClone(points[0]).reverse()), turf.point(deepClone(points[2]).reverse()));
//             sector.setStopAngle(computedEnd(trans(startAngle), trans(endAngle)));
//             isDrawing = false;
//             this.map.dragging.enable();
//             this.map.off('click', onClick);
//             this.map.off('mousemove', onMove);
//             this.map.fire('bm_draw_end', { detail: { layer: sector, type: 'sector' } })
//           }
//         }
//       };
//       var trans = (angle) => {
//         return angle < 0 ? 360 + angle : angle;
//       }
//       var computedEnd = (startAngle, endAngle) => {
//         return endAngle < startAngle ? endAngle + 360 : endAngle;
//       }
//       var onMove = (e) => {
//         if (isDrawing) {
//           if (points.length == 1) {
//             // 画直线阶段
//             line.setLatLngs([points[0], [e.latlng.lat, e.latlng.lng]])
//           } else {
//             // 移除线段，创建扇形
//             if (line != undefined) {
//               line.remove();
//               line = undefined;
//             }
//             startAngle = turf.bearing(turf.point(deepClone(points[0]).reverse()), turf.point(deepClone(points[1]).reverse())), endAngle;
//             if (sector == undefined) {
//               endAngle = turf.bearing(turf.point(deepClone(points[0]).reverse()), turf.point([e.latlng.lat, e.latlng.lng].reverse()));
//               sector = L.semiCircle(points[0], { // not working
//                 radius: this.map.distance(points[1], points[0]),
//                 startAngle: trans(startAngle),
//                 stopAngle: computedEnd(trans(startAngle), trans(endAngle))
//               });
//               sector.addTo(this.map);
//             } else {
//               endAngle = turf.bearing(turf.point(deepClone(points[0]).reverse()), turf.point([e.latlng.lat, e.latlng.lng].reverse()));
//               sector.setStopAngle(computedEnd(trans(startAngle), trans(endAngle)));
//             }
//           }
//         }
//       }
//       this.map.on('click', onClick);
//       this.map.on('mousemove', onMove);
//     },
//     clearDraw() {
//       if (this.layer.length != 0) {
//         this.layer.forEach(layer => {
//           this.map.removeLayer(layer);
//         })
//       }
//       if (this.markers.length > 0) {
//         this.markers.forEach((m) => {
//           m.remove();
//         });
//         this.markers = [];
//       }
//     },
//     clearTargetDraw(layers) {
//       if (layers.length != 0) {
//         layers.forEach(layer => {
//           this.map.removeLayer(layer);
//         })
//       }
//     },
//     setMark(location, options, popup) {
//       if (location.latitude == null || location.longitude == null) {
//         return false;
//       }
//       if (popup == undefined) {
//         var marker = this.addMarker(
//           [location.latitude, location.longitude], options
//         );
//       } else {
//         var marker = this.addMarkerWithPopup(
//           [location.latitude, location.longitude], popup, options
//         );
//       }
//       return marker;
//     },
//     renderMarkers(locations, options, clearOld = true) {
//       if (this.markers.length > 0 && clearOld) {
//         this.markers.forEach((m) => {
//           m.remove();
//         });
//         this.markers = [];
//       }
//       if (locations.length > 0) {
//         locations.forEach((location) => {
//           if (location.option != undefined) {
//             options = Object.assign(options || {}, location.option);
//           }
//           console.log(options)
//           this.markers.push(this.setMark(location, options));
//         });
//       }
//     }
//   }
// }